<template>
  <div class="input-box">
    <a-input size="large" placeholder="搜索职位" v-model:value.trim="searchKeys.name" @pressEnter="onEnter" allowClear>
      <template #prefix>
        <SearchOutlined />
      </template>
      <template #suffix>
        <a-button type="primary">搜索</a-button>
      </template>
    </a-input>
  </div>
  <div class="search-box">
    <div class="box pl-18px pr-20px pb-8px">
      <div class="box-title">公司地点：</div>
      <ul class="ul-addr">
        <li
          :class="{
            active: searchKeys.areaCode === null,
            link: true,
          }"
          @click="onClickAreaCode(null)"
        >
          不限
        </li>
        <li
          v-for="(item, index) in _provinceList"
          :key="index"
          :class="{
            active: searchKeys.areaCode === item.id,
            link: true,
          }"
          @click="onClickAreaCode(item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="box pl-18px pr-20px pb-8px mt-20px" v-if="_cityList.length">
      <div class="box-title">选择城市：</div>
      <ul class="ul-addr">
        <li
          v-for="(item, index) in _cityList"
          :key="index"
          :class="{
            active: searchKeys.cityCode === item.id,
            link: true,
          }"
          @click="onClickCityCode(item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>

    <a-divider class="!my-15px" />
    <div class="box pb-8px pt-8px pl-18px pr-20px">
      <div class="box-title">行业类型：</div>
      <ul class="ul-hangye" :class="{ close: !isExpand }">
        <li
          :class="{
            link: true,
            active: searchKeys.categoryId === null,
          }"
          @click="onCLickIndus(null)"
        >
          不限
        </li>
        <li
          v-for="(item, index) in industryList"
          :key="index"
          :class="{
            link: true,
            active: searchKeys.categoryId === item.code,
          }"
          @click="onCLickIndus(item.code)"
        >
          {{ item.name }}
        </li>
      </ul>
      <a class="action" @click="onExpand">
        {{ isExpand ? '收起' : '展开' }} <up-outlined v-if="isExpand" />
        <down-outlined v-else />
      </a>
    </div>
    <a-divider class="!my-15px" />
    <div class="select-box flex pl-18px pr-20px pt-8px" :class="{ active: searchKeys.positionCodes?.length }">
      <div class="box-title mt-8px!">更多：</div>
      <a-tree-select
        :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
        v-model:value="searchKeys.positionCodes"
        placeholder="职位类别"
        :tree-data="posList"
        allow-clear
        showSearch
        class="!mr-20px w-160px"
        multiple
        treeDefaultExpandAll
        :maxTagCount="1"
        :showArrow="true"
        @change="onPosChange"
        :dropdownStyle="{
          'min-width': '400px',
        }"
      >
        <template #tagRender="{ label }">
          <a-tag class="reset-tag">{{ label }}</a-tag>
        </template>
      </a-tree-select>

      <a-select
        :options="SALARY_LIST"
        v-model:value="searchKeys.salary"
        placeholder="薪资要求"
        class="!mr-20px w-160px"
        allowClear
        @change="onEmit"
      >
      </a-select>
      <a-select
        :options="EDU_DICT"
        v-model:value="searchKeys.degreeCode"
        placeholder="学历要求"
        class="!mr-20px w-160px"
        allowClear
        @change="onEmit"
      >
      </a-select>
      <a-select
        :options="WORK_EXP_DICT"
        v-model:value="searchKeys.workExpCode"
        placeholder="工作经验"
        class="!mr-20px w-160px"
        allowClear
        @change="onEmit"
      >
      </a-select>
      <a-select
        :options="POS_TYPE_DICT"
        v-model:value="searchKeys.jobType"
        placeholder="职位类型"
        class="!mr-20px w-160px"
        allowClear
        @change="onEmit"
      >
      </a-select>
      <a-select
        :options="COMPANY_NATURE"
        v-model:value="searchKeys.typeCode"
        placeholder="公司性质"
        class="!mr-20px w-160px"
        allowClear
        @change="onEmit"
      >
      </a-select>
      <a-select
        :options="COMPANY_SCALE_DICT"
        v-model:value="searchKeys.scaleCode"
        placeholder="公司规模"
        allowClear
        class="w-160px"
        @change="onEmit"
      >
      </a-select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useProvinceCityList } from '@/hooks/useCommonFetch';
import { onMounted, ref } from 'vue';
import { DownOutlined, UpOutlined, SearchOutlined } from '@ant-design/icons-vue';
import _ from 'lodash';
import CommonService from '@/api/common';
import { array2Tree } from '@/utils/util';
import { SALARY_LIST, EDU_DICT, WORK_EXP_DICT, POS_TYPE_DICT, COMPANY_NATURE, COMPANY_SCALE_DICT } from '@/utils/dict';
import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';

const emit = defineEmits(['search']);
const { query } = useRoute();
const { provinceCityList, getProvinceCityList } = useProvinceCityList();
const _provinceList = computed(() => {
  return provinceCityList.value.filter((t) => t.level === 1);
});
const _cityList = computed(() => {
  return provinceCityList.value.filter((t) => t.parentId === searchKeys.value.areaCode);
});
const isHide = ref(true);
const searchKeys = defineModel<any>();

if (query?.positionCode) {
  if (query?.code === '1') {
    isHide.value = false;
    searchKeys.value.positionCodes = [];
  } else {
    searchKeys.value.positionCodes = [query.positionCode];
  }
}

const isExpand = ref(false);
const industryList = ref<any>([]);
const posList = ref<any>([]);

const onCLickIndus = _.debounce((key: any) => {
  // if (key === null) {
  //   searchKeys.value.industryCode.length = 0;
  // } else {
  //   if (searchKeys.value.industryCode?.includes(key)) {
  //     const index = searchKeys.value.industryCode.findIndex((t: any) => t === key);
  //     searchKeys.value.industryCode.splice(index, 1);
  //   } else {
  //     if (searchKeys.value.industryCode?.length >= 5) {
  //       message.warn(`行业分类最多只能选择五项~`);
  //       return;
  //     }
  //     searchKeys.value.industryCode.push(key);
  //   }
  // }
  if (key === null) {
    searchKeys.value.categoryId = null;
  } else {
    searchKeys.value.categoryId = key;
  }
  onEmit();
}, 100);

const onExpand = _.debounce(() => {
  isExpand.value = !isExpand.value;
}, 300);

function onEnter() {
  onEmit();
}

function onEmit() {
  const params: any = _.cloneDeep(searchKeys);
  const salary = SALARY_LIST.find((t) => t.value === params.salary);
  params.salaryMin = salary?._value?.[0] || null;
  params.salaryMax = salary?._value?.[1] || null;
  params.positionCodes = params.positionCodes?.join(',') || null;
  params.industryRootCodeList = params.industryCode?.join(',') || null;
  emit('search', params);
}

function onPosChange(value: any) {
  if (value?.length > 5) {
    searchKeys.value.positionCodes.length = 5;
    message.warn(`职位类别最多只能选择五项~`);
    return;
  }
  onEmit();
}

function onClickAreaCode(key: any) {
  searchKeys.value.areaCode = key;
  onEmit();
}
function onClickCityCode(key: any) {
  searchKeys.value.cityCode = key;
  onEmit();
}

async function selectPositionListFromRedis() {
  try {
    const resp = await CommonService.selectPositionListFromRedis();
    if (resp.code === 200) {
      posList.value = array2Tree(resp.data, '', 'code', 'parentCode');
    }
  } catch (error) {
    console.log(error);
  }
}

async function selectIndustryListFromRedis() {
  try {
    const resp = await CommonService.selectIndustryListFromRedis();
    if (resp.code === 200) {
      const data = resp.data?.filter((t: { level: number }) => t.level == 0) || [];
      industryList.value = data;
    }
  } catch (error) {
    console.log(error);
  }
}

selectIndustryListFromRedis();
selectPositionListFromRedis();
getProvinceCityList();

onMounted(() => {
  if (query?.code) {
    searchKeys.value.positionCodes.push(query.code);
  }
  onEmit();
});
</script>

<style lang="scss" scoped>
.input-box {
  margin: 0 auto;
  width: 901px;
  :deep(.ant-input-affix-wrapper-lg) {
    height: 50px;
    padding-right: 5px;
    border-radius: 25px;
    border: none;
    border: 1.5px solid #3577e9;
    .ant-input-suffix {
      font-size: 24px;
      color: #1890ff;
    }
    :deep(.ant-input-affix-wrapper) {
      position: relative;
      display: inline-block;
      width: 100%;
      min-width: 0;
      padding: 4px 11px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      line-height: 1.5715;
      background-color: #fff;
      background-image: none;
      /* border: 1px solid #d9d9d9; */
      border-radius: 8px;
      transition: all 0.3s;
      display: inline-flex;
    }

    .ant-btn {
      border-radius: 200px;
      height: 42px;
      width: 120px;
      margin-top: -9.5px;
      margin-bottom: -10px;
      font-weight: 700;
      font-size: 20px;
      line-height: 38px;
      padding: 0;
    }
  }
}
.search-box {
  margin: 0 auto;
  width: 1200px;
  margin-top: 30px;
  box-sizing: border-box;
  padding: 28px 0 20px 0;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 10px 0 #d0cbcc7a;
  .mb-30 {
    margin-bottom: 30px;
  }
  .pr-48 {
    padding-right: 48px;
  }

  .reset-tag {
    background: #f5f5f5;
    border: 1px solid #f0f0f0;
    margin-right: 5px;
  }
  .box-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 16px;
    margin-right: 16px;
    word-break: keep-all;
    margin-top: 3px;
  }
  .box {
    display: flex;
    box-sizing: border-box;
    position: relative;

    .action {
      position: absolute;
      top: 12px;
      right: 20px;
      user-select: none;
    }
  }
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  ul {
    display: flex;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    color: #666666;
    flex-wrap: wrap;
    margin: -10px;
    li {
      word-break: keep-all;
      padding: 4px 10px;
      margin: 10px;
      transition: all 0.3s ease;
      border-radius: 11px;
    }

    &.ul-addr {
      li {
        cursor: pointer;
        &.active,
        &:hover {
          background: #1890ff;
          color: #fff;
          font-weight: 700;
        }
      }
    }

    &.ul-hangye {
      flex-wrap: wrap;
      margin: -8px -14px;
      transition: height ease-in 1s;
      &.close {
        height: 32px;
        overflow: hidden;
      }

      li {
        margin: 8px 14px;
        transition: all 0.3s ease;
        border-radius: 11px;
        cursor: pointer;
        &.active,
        &:hover {
          background: #1890ff;
          color: #fff;
        }
      }
    }
  }

  .hide {
    display: none;
  }
}
</style>
